import { defineComponent, reactive } from "vue";
import style from "./index.module.less";
import PageImgTitle from "@/components/PageImgTitle";
import CardView from "@/components/CardView";
import GoodsListItem from "@/components/GoodsListItem";
import Text from "@/components/Text";
import Search from "@/components/Search";
import FilterMenu from "@/components/FilterMenu";
import {
  IFilterMenuChoose,
  IFilterMenuPropsData,
} from "@/components/FilterMenu/types";
import ListView from "@/components/ListView";
import TextGroups from "@/components/TextGroups";
import ButtonGroupView from "@/components/ButtonGroupView";
import { Divider } from "vant";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
import { useRequest } from "./request";
import { getUserInfoUrl } from "@/command/apiTool";
import IconText from "@/components/IconText";
import time from "./asset/time.png";
import PageTitle from "@/components/PageTitle";
import BackgroundPlate from "@/components/BackgroundPlate";
import BackGroundImage from "@/components/BackGroundImage";
import BrandInfo from "@/components/BrandInfo";
import { ILabelProps } from "@/components/Label/types";
import InfoCellGray from "@/components/InfoCellGray";
import TextView from "@/components/TextView";
import RoundEdgeButtonGroup from "@/components/RoundEdgeButtonGroup";
import { ITextGroupPropsData } from "@/components/TextGroups/types";
import { useRouter } from "vue-router";
import FilterMenuSearch from "@/components/FilterMenuSearch";

export default defineComponent({
  name: "",
  setup() {
    const router = useRouter();
    const form = reactive({});
    const { page, myEntity, btnAction } = useRequest();
    const render1 = () => {
      const labels: ILabelProps[] = [
        {
          name: "品牌",
          type: "tagOrange",
        },
      ];
      const textLables: ILabelProps[] = [
        {
          name: myEntity.value.productName + "类别可使用",
          type: "blue",
        },
      ];
      return (
        <BackGroundImage>
          <CardView>
            <BrandInfo
              text={myEntity.value.entityComment}
              desc={myEntity.value.address}
              // labels={labels}
              types={myEntity.value.productName ? textLables : undefined}
              type="edit"
              src={myEntity.value.logoUrl}
              title={myEntity.value.name}
            />
          </CardView>
        </BackGroundImage>
      );
    };
    const renderItem = (e: any) => {
      const buttons = [
        {
          text: "拒绝",
          onClick: () => {
            btnAction({
              id: e.id,
              state: "2",
            });
          },
        },
        {
          text: "同意",
          onClick: () => {
            btnAction({
              id: e.id,
              state: "1",
            });
          },
        },
      ];
      const data: ITextGroupPropsData[] = [
        {
          name: "需代购种子",
          value: e.productName,
          width: "40%",
        },
        {
          name: "代购数量",
          value: e.applyNum,
          width: "40%",
        },
      ];
      return (
        <div class={"w-full"}>
          <InfoCellGray
            {...{
              labels: [
                {
                  name: "品牌",
                  type: "yellow",
                },
              ],
              data: data,
              title: e.userName,
              src: e.logoUrl,
            }}
          >
            <TextView>{e.address}</TextView>
            <RoundEdgeButtonGroup data={buttons} />
          </InfoCellGray>
          <Divider />
        </div>
      );
    };
    const render2 = () => {
      const data: IFilterMenuChoose[] = [
        { type: "area", key: "code" },
        { type: "productType", key: "productId", title: "种植品种" },
        { type: "datePicker", key: "date", title: "日期" },
      ];
      return (
        <CardView title="申请列表">
          <FilterMenuSearch choose={data} v-model={form} searchKey="name" />
          <ListView
            {...getUserInfoUrl({
              dh: "/api/H5/skill/product/heavy/applyList",
              xh: "",
            })}
            ref={page}
            type="page"
            renderItem={renderItem}
            params={form}
          />
        </CardView>
      );
    };

    return () => {
      // 之前之前UI设计稿没有切图 所以头部的图片没有 后续有了以后 可以在pageimgTitle基础上修改 这个是专门带背景图的
      return (
        <PageTitle
          title="帮选品种"
          childClass="m-child-top-20"
          right={() => (
            <IconText
              url={time}
              text="帮选记录"
              class="header-right"
              onClick={() => router.push("/helpSelectionRecord")}
            />
          )}
        >
          {render1()}
          {render2()}
        </PageTitle>
      );
    };
  },
});
